<template>
  <div class="search-top">
    <div class="search-inp">
      <div class="search-top-list" v-for="(item, index) in searchObjList" :key="'sear_' + index + item.id">
        <div class="search-and"><span  v-if="index">{{controlSto.language == 1 ? 'AND' : '和'}}</span></div>

        <div class="search-box">
          <div class="search-left" v-lang="{lang: controlSto.language, lgid: (index ? item.combinationTolgid : item.combinateOringinlgid)}">{{ index ? item.combinationTo : item.combinateOringin }}</div>
          <el-dropdown class="combin-dropdown">
            <el-input v-model="item.seachCon" @input="searchInput(item.seachCon, index)" class="search-elIn" :placeholder="index ? item.targetPlaceholder : item.originPlaceholder"></el-input>
            <template #dropdown>
              <el-dropdown-menu class="combin-drop-menu">
                <template v-if="index">
                  <el-dropdown-item class="combin-drop-item" @click.stop="toGetSearch(o.code, o.name, index)" v-for="o in item.targetData" :key="o.code">{{ o.name }}</el-dropdown-item>
                </template>
                <template v-else>
                  <el-dropdown-item class="combin-drop-item" @click.stop="toGetSearch(o.code, o.name, index)" v-for="o in item.originData" :key="o.code">{{ o.name }}</el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          
         
          <!-- <el-select v-model="item.seachCon" filterable :id="item.id" class="search-elIn" :placeholder="index ? item.targetPlaceholder : item.originPlaceholder">
            <template v-if="index">
              <el-option  v-for="o in item.targetData" :key="o.code" :label="o.name" :value="o.code"></el-option>
            </template>
            <template v-else>
              <el-option v-for="o in item.originData" :key="o.code" :label="o.name" :value="o.code"></el-option>
            </template>
          </el-select> -->
        </div>
        <div class="search-remove" @click.stop="removeSearchCond(item, index)"><span v-if="index"><el-icon color="#AAAAAA" size="24"><Remove /></el-icon></span></div>
        <div class="search-add" @click.stop="addSearchCond(item, index)"><span v-if="index && index == (searchObjList.length - 1) && index < item.maxSize"><el-icon color="#AAAAAA" size="24"><CirclePlus /></el-icon></span></div>
      </div>
    </div>
    <div class="search-btn">
      <el-button class="btn-determin" @click="searchResult()" v-lang="{lang: controlSto.language, lgid: '-89'}">submit</el-button>
      <el-button class="btn-reset" @click="reset()" v-lang="{lang: controlSto.language, lgid: '-88'}">resetting</el-button>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, reactive, ref, toRefs } from 'vue'
import { controlStore } from '@/stores/control'
const opt = ref('')
const controlSto = controlStore();
const mianCondition = ref('');
const props = defineProps({
  searchObjList: {
    type: Object,
    default: () => []
  }
})
const { searchObjList }= toRefs(props);
const emitter = defineEmits(['removeSearchCond', 'addSearchCond', 'selSearchMathod', 'reset', 'searchResult', 'searchInput', 'toGetSearch'])

const removeSearchCond = (item, index) => emitter('removeSearchCond', item, index)
const addSearchCond = (item, index) => emitter('addSearchCond', item, index)
const selSearchMathod = (item, index) => emitter('selSearchMathod', item, index)
const reset = () => emitter('reset')
const searchResult = () => emitter('searchResult')
const searchInput = (value, index) => emitter('searchInput', value, index)
const toGetSearch = (code, name, index) => emitter('toGetSearch', code, name, index)
</script>

<style scoped lang="scss">
.search-top {
  display: flex;
  justify-content: space-between;
  .search-inp {
    width: 80%;
    .search-top-list {
      display: flex;
      margin-bottom: 16px;
      .search-box {
        border: 1px solid rgba(0,0,0,0.15);
        border-radius: 4px;
        height: 32px;
        // padding: 3px 0;
        display: flex;
        width: calc(100% - 150px);
        .combin-dropdown {
         width: 400px;
         border-left: 1px solid #D8D8D8;
         height: 26px;
         margin: 3px 0;
        }
      }
      .search-elIn {
        width: 90%;
        // padding: 2px 0;
      }
      .search-and {
        width: 60px;
        line-height: 32px;
        text-align: center;
      }
      .search-left {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #967846;
        padding: 5px 10px;
        // line-height: 30px;
      }
      .search-remove {
        padding-top: 4px;
        margin-left: 16px;
        cursor: pointer;
      }
      .search-add {
        padding-top: 4px;
        margin-left: 16px;
        cursor: pointer;
      }
    }
  }
  .search-btn {
    width: 15%;
    text-align: right;
    min-width: 260px;
    .btn-reset {
      width: 100px;
      height: 32px;
      border-radius: 4px;
      border: 1px solid #BC9F77;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #BC9F77;
      line-height: 32px;
      font-style: normal;
      cursor: pointer;
      &:hover{
        background: #FAF4EA;
      }
    }
    .btn-determin {
      width: 100px;
      height: 32px;
      background: #BC9F77;
      border-radius: 4px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 32px;
      font-style: normal;
      border: none;
      &:hover {
          background-color: #E6C896;
      }
      &:active {
          background-color: #967846;
      }
    }
  }
}
.sel-opt {
  width: 100px;
}
</style>
<style lang="scss">
.search-top-list {
  .el-input-group__prepend, .el-input-group__append {
    background: none;
  }
  .el-input__wrapper {
    // border-left: 1px solid #D8D8D8;
    box-shadow: none;
  }
  .el-select__wrapper {
    box-shadow: none;
    border-left: 1px solid #D8D8D8;
    border-radius: 0!important;
    
  }
  .el-select__wrapper.is-hovering:not(.is-focused) {
    box-shadow: none;
  }
  .el-select__placeholder {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }
  .is-transparent {
    color: #999999;
  }
}
.el-select-dropdown__item.is-selected {
  color: #967846;
  font-weight: 500;
}
.el-select-dropdown__item {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  text-align: left;
  font-style: normal;
}
.combin-drop-item {
  &:not(.is-disabled):focus {
          color: #C7802D;
          background-color: #FAFAFA;
      }
}
.combin-drop-menu {
  min-width: 500px;
}
</style>
